<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            list-style: none;
        }

        #tage {
            border-bottom: 1px solid #000;
            background-color: tomato;
            overflow: hidden;
        }

        #tage>div {
            float: left;
        }

        #tage>div>p {
            text-align: right;
        }

        li {
            border-bottom: 2px solid #000;
            padding: 5px 0;
            background-color: yellowgreen;
        }

        .fabu {
            margin-left: 40px;
        }
    </style>
</head>

<body>
    <div id="tage">
        <div>昵称:</div>
        <div>
            <input type="text" id="name1"><br>
            <textarea name="" id="content1" cols="30" rows="10"></textarea>
            <p><input type="checkbox" name="" id="niming">匿名</p>
            <p><input type="button" value="发表" id="push"></p>
        </div>
    </div>
    <ul id="content"></ul>

    <script src="./lib/jquery.js"></script>
    <script src="./lib/fools.js"></script>
    <script>
        const ul = $("#content")


        $("#push").click(function () {

            if ($("#niming").prop("checked") || $("#name1").val() && $("#content1").val()) {
                let userName = $("#name1").val()
                if ($("#niming").prop("checked")) {
                    userName = "路人甲"
                }

                const content = $("#content1").val()
                const time = new Date()
                let h = null
                let m = null
                let s = null
                if (time.getHours() > 12) {
                    h = "下午" + (time.getHours() - 12)
                } else {
                    h = "上午" + time.getHours()
                }
                m = Fools.isgtTen(time.getUTCMinutes())
                s = Fools.isgtTen(time.getSeconds())
                
                const fabuTime = h + ":" + m + ":" + s

                const lis = $(`<li><p>${userName}     ${fabuTime}</p>
                    <p class='fabu'>${content}</p>
                    </li>`)
                lis.appendTo(ul)
                $("#content1").val("")
                $("#name1").val("")
                $("#niming").prop("checked", false)

            } else {
                alert("昵称和内容不能为空")
            }
        })


    </script>
</body>

</html>